<template>
  <!-- 确认提示，选择客户 -->
  <div>
    <el-dialog
      v-el-drag-dialog
      title="确认提示"
      :visible.sync="visible"
      append-to-body
      width="600px"
      @closed="reset"
    >
      <el-form ref="form" class="form" :model="query" label-position="right" label-width="120px">
        <!-- <el-form-item> -->
        <div>
          您确定要将此客户划分在
          <p style="color: red;">{{ priceTypeDetail.priceCgName }}</p>
          价格分类中吗
        </div>
        <!-- </el-form-item> -->
        <el-divider />
        <div style="margin-bottom: 20px;">请核实客户特价生效范围</div>
        <el-form-item label-width="0px">
          <el-radio-group v-model="query.radio1">
            <el-radio :label="1" style="margin-bottom: 20px;">不限</el-radio>
            <br>
            <el-radio :label="2">限定生效范围</el-radio>
            <el-form-item v-show="query.radio1 === 2" label="生效范围(机构)">
              <el-tree-select
                v-model="query.orgId"
                :clearable="false"
                class="tree-select"
                :popover-width="360"
                :select-params="{
                  clearable: true,
                  placeholder: '请选择组织机构',
                  loading: $loadingPlugin.getTreeData
                }"
                :tree-params=" {
                  'default-expand-all': true,
                  'expand-on-click-node': false,
                  'highlight-current': true,
                  props:{
                    value:'orgSNNo',
                    label: 'orgName',
                    disabled: 'disabled',
                  },
                  data: treeData
                }"
                @node-click="selectTreeChange"
              />
            </el-form-item>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="save">确 认</el-button>
        <el-button @click="visible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import getTreeData from '@/utils/jsonTree'
  import { queryPriceTypePriceWithCsmAdd } from '@/api'

  export default {
    name: 'confirmation',
    data() {
      return {
        visible: false,
        treeData: [],
        temp: {},
        csmList: [],
        orgObj: {},
        priceTypeDetail: {},
        query: {
          gtTree: 0,
          goods: 0,
          radio1: 1,
          priceCgName: ''
        }
      }
    },
    computed: {
      ...mapGetters([
        'orgList'
      ])
    },
    async created() {
      await this.getTreeData()
    },
    methods: {
      // 获取所属机构数据
      async getTreeData() {
        // const res = await organizationQueryList({})
        const data = this.orgList.map(item => ({
          label: item.name,
          ...item
        }))
        this.treeData = getTreeData(data)
      },
      // 选择所属机构
      selectTreeChange(value) {
        console.log(value)
        this.orgObj = { ...value }
        this.orgSNNo = value.orgSNNo
      },
      // 打开
      open(query) {
        return new Promise((resolve) => {
          this.resolve = resolve
          this.visible = true
          if (query) {
            this.csmList = [...query.csmList]
            this.priceTypeDetail = { ...query.priceTypeDetail }
            // this.query = Object.assign(this.query, query)
          }
        })
      },
      async   save() {
        if (this.query.radio1 === 2) {
          if (!this.orgObj.orgId) {
            this.$message.error('请选择生效范围机构')
            return
          }
          var list = this.csmList.map(l => {
            return {
              contact: l.contact,
              contactPhone: l.csmRgPhone,
              csmAddress: l.csmRgAddress,
              csmCode: l.csmCode,
              csmId: l.csmId,
              csmName: l.csmName,
              csmType: l.csmType,
              orgScope: this.query.radio1,
              priceCgId: this.priceTypeDetail.priceCgId,
              priceCgName: this.priceTypeDetail.priceCgName,
              scopeOrgId: this.orgObj.orgId,
              scopeOrgName: this.orgObj.orgName,
              scopeOrgSNNo: this.orgObj.orgSNNo
            }
          })
        } else {
          list = this.csmList.map(l => {
            return {
              contact: l.contact,
              contactPhone: l.csmRgPhone,
              csmAddress: l.csmRgAddress,
              csmCode: l.csmCode,
              csmId: l.csmId,
              csmName: l.csmName,
              csmType: l.csmType,
              orgScope: this.query.radio1,
              priceCgId: this.priceTypeDetail.priceCgId,
              priceCgName: this.priceTypeDetail.priceCgName
            }
          })
        }
        console.log(list)
        const res = await queryPriceTypePriceWithCsmAdd(list)
        if (res.success) {
          this.$message.success('新增成功')
          this.reset()
          // this.$emit('refresh')
          this.$bus.$emit('refreshPriceAdd')
        }
      },
      reset() {
        this.priceTypeDetail = {}
        this.visible = false
        this.csmList = []
        this.orgObj = {}
        this.query = {
          gtTree: 0,
          goods: 0,
          radio1: 1,
          radio2: 1,
          radio3: 1
        }
      }
    }
  }
</script>

<style lang='scss' scoped>
.form {
  .div {
    margin: auto;
    text-align: center;
  }

  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  & /deep/ .el-form-item {
    width: 100%;
    .el-form-item__content > .el-select {
      width: 100%;
    }
  }
  .block {
    width: 100%;
  }
}
</style>
